<form [formGroup]="searchForm" class="search-area" fxLayoutGap="16px">
  <span fxFlex></span>
  <button (click)="create()" mat-mini-fab tabindex="-1" type="button">
    <mat-icon>add</mat-icon>
  </button>

  <button (click)="batchPrint()" mat-mini-fab tabindex="-1" type="button">
    <mat-icon>print</mat-icon>
  </button>
</form>

<mat-divider></mat-divider>

<mat-table [dataSource]="dataSource" fxFlex>
  <ng-container matColumnDef="select">
    <mat-header-cell *matHeaderCellDef fxFlex="80px">
      <mat-checkbox (change)="$event ? masterToggle() : null"
                    [checked]="selection.hasValue() && isAllSelected()"
                    [indeterminate]="selection.hasValue() && !isAllSelected()">
      </mat-checkbox>
    </mat-header-cell>
    <mat-cell *matCellDef="let row" fxFlex="80px">
      <mat-checkbox (change)="$event ? selection.toggle(row) : null"
                    (click)="$event.stopPropagation()"
                    [checked]="selection.isSelected(row)">
      </mat-checkbox>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.id}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="type">
    <mat-header-cell *matHeaderCellDef>{{'SilkCar.type'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">{{('SilkCar.Type.' + row.type)|translate}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="number">
    <mat-header-cell *matHeaderCellDef>{{'SilkCar.number'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row.number}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="pliesNum">
    <mat-header-cell *matHeaderCellDef>{{'SilkCar.pliesNum'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row.pliesNum}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="code">
    <mat-header-cell *matHeaderCellDef>{{'SilkCar.code'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row.code}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="rowAndCol">
    <mat-header-cell *matHeaderCellDef>{{'Common.row'|translate}}X{{'Common.col'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row.row}}×{{row.col}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="btns">
    <mat-header-cell *matHeaderCellDef>{{'Common.operation'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row" [matMenuTriggerFor]="btnsMenu" matRipple>
      <mat-icon>list</mat-icon>
      <mat-menu #btnsMenu="matMenu">
        <button (click)="update(row)" *ngIf="isAdmin$|async" color="primary" mat-menu-item type="button">
          {{'Common.edit'|translate}}
        </button>
        <button (click)="print(row)" color="primary" mat-menu-item type="button">
          {{'Common.print'|translate}}
        </button>
      </mat-menu>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

<mat-paginator (page)="onPageEvent($event)" [length]="count$|async" [pageIndex]="pageIndex$|async" [pageSizeOptions]="pageSizeOptions" [pageSize]="pageSize$|async" showFirstLastButtons></mat-paginator>

